<template>
  <div>
    <!--    各类总数合计-->
    <el-container>
      <el-header>
        <h2 style="margin: 0">首页</h2>
      </el-header>
      <el-main>
        <div>
          <el-row :gutter="40">
            <el-col :span="6" v-for="(item,index) in total" :key="index">
              <div style="width: 100%;margin: 0 auto" :class="'fitNav'">
                <p :class="'resZ'">{{ item.num }}{{ item.tip }}</p>
                <p>{{ item.text }}</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
    <!--    待办事项-->
    <el-container>
      <el-main>
        <div style="border:1px solid rgba(0,0,0,0.2)">
          <h3 :class="'hed1'">待处理事务</h3>
          <div>
            <el-row :gutter="40">
              <el-col :span="6" v-for="(item,index) in sh" :key="index">
                <div style="text-align: center">
                  <p @click="details(index)">{{ item.text }}({{ item.num }})</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-main>
    </el-container>
    <!--    医生用户总览-->
    <el-container>
      <el-main>
        <div>
          <el-row :gutter="40">
            <el-col :span="12" v-for="(item,index) in zl" :key="index">
              <div style="border: 1px solid rgba(0,0,0,0.2);">
                <div :class="'zl'">
                  {{item.title}}
                </div>
                <div>
                  <el-row :gutter="20">
                    <el-col :span="6" v-for="(items,index) in item.whole" :key="index" style="text-align: center">
                      <p :class="'resZ'">{{items.num}}</p>
                      <p>{{items.text}}</p>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
    <div>
      <el-dialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      total: [
        {
          num: 10000,
          text: '问诊总数',
          tip: '人'
        },
        {
          num: 1000000,
          text: '问诊费用总额',
          tip: '元'
        },
        {
          num: 1000000,
          text: '药品销售总额',
          tip: '元'
        },
        {
          num: 1000000,
          text: '挂号费用总额',
          tip: '元'
        }
      ],
      sh: [
        {
          text: '待审核医生',
          num: 10
        },
        {
          text: '待审核用户',
          num: 10
        },
        {
          text: '待审核药品',
          num: 10
        },
        {
          text: '待审核工资',
          num: 10
        }
      ],
      zl: [
        {
          title: '用户总览',
          whole: [
            {
              num: 10,
              text: '今日新增'
            },
            {
              num: 10,
              text: '昨日新增'
            },
            {
              num: 10,
              text: '本月新增'
            },
            {
              num: 10,
              text: '用户总数'
            }
          ]
        },
        {
          title: '医生总览',
          whole: [
            {
              num: 10,
              text: '今日新增'
            },
            {
              num: 10,
              text: '昨日新增'
            },
            {
              num: 10,
              text: '本月新增'
            },
            {
              num: 10,
              text: '医生总数'
            }
          ]
        }
      ]
    }
  },
  methods: {
    details (index) {

    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: white;
  color: black;
}

.fitNav {
  border: 1px solid rgba(0, 0, 0, 0.3);
  text-align: center;
}

.hed1 {
  background-color: rgba(228, 228, 228, 0.5);
  padding-left: 20px;
  font-weight: normal;
  line-height: 50px;
}
.zl {
  background-color:  rgba(228, 228, 228, 0.5);
  border-bottom: 0;
  line-height: 50px;
  padding-left: 20px;
}
.resZ {
  color: red;
}
</style>
